class Enlarge
{
    constructor(el,options){
        this.el = document.querySelector(el);
        this.imgObj = this.el.querySelector('.img');
        this.maskObj = this.el.querySelector('.mask')
        this.enlargeObj = this.el.querySelector('.enlarge')
        this.options=options;
        this.init();
    }

    init(){
        this.config();
        this.changImg();
        this.overOut();
        this.maskMove();
        this.tbSize();
        // this.tbEnlarge();
    }

    config(){
        this.maskObj.style.background = this.options;
    }

    overOut(){
        this.imgObj.onmouseover=()=>{
            this.maskObj.style.display = this.enlargeObj.style.display = 'block'
        }
        this.imgObj.onmouseout=()=>{
            this.maskObj.style.display = this.enlargeObj.style.display = 'none'
        }
    }

    maskMove(){
        this.imgObj.onmousemove=(evt)=>{
            let e = evt || window.event;
            let x = e.pageX - this.el.offsetLeft-this.maskObj.offsetWidth/2;
            let y = e.pageY - this.el.offsetTop-this.maskObj.offsetHeight/2;
            if(x<0){x=0}
            if(y<0){y=0}
            let maxX = this.imgObj.clientWidth - this.maskObj.offsetWidth;
            let maxY = this.imgObj.clientHeight - this.maskObj.offsetHeight;
            if(x>maxX){x=maxX}
            if(y>maxY){y=maxY}
            this.maskObj.style.left = x +'px';
            this.maskObj.style.top = y +'px';
            this.tbEnlarge(x,y);
        }
    }

    //获取元素非行内样式
    getStyle(el,elCssName){
        return window.getComputedStyle ? window.getComputedStyle(el)[elCssName] : el.currentStyle[elCssName];
    }

    tbSize(){
        let imgObjW = parseInt(this.getStyle(this.imgObj,'width'));
        let imgObjH = parseInt(this.getStyle(this.imgObj,'height'));
        let enlargeBjSize = this.getStyle(this.enlargeObj,'background-size');
        // console.log(enlargeBjSize); 
        let enlargeSizeArr = enlargeBjSize.split(' ');
        let enlargeBjW = parseInt(enlargeSizeArr[0]);
        let enlargeBjH = parseInt(enlargeSizeArr[1]);
        // console.log(enlargeBjW,enlargeBjH);
        let maskObjW = parseInt(this.getStyle(this.maskObj,'width'));
        let maskObjH = parseInt(this.getStyle(this.maskObj,'height'));
        let w = enlargeBjW*maskObjW/imgObjW;
        let h = enlargeBjH*maskObjH/imgObjH;
        this.enlargeObj.style.width = w +'px';
        this.enlargeObj.style.height = h +'px';
    }

    tbEnlarge(x,y){
        let enlargeBjSize = this.getStyle(this.enlargeObj,'background-size');
        // console.log(enlargeBjSize); 
        let enlargeSizeArr = enlargeBjSize.split(' ');
        let enlargeBjW = parseInt(enlargeSizeArr[0]);
        let enlargeBjH = parseInt(enlargeSizeArr[1]);
        let imgObjW = parseInt(this.getStyle(this.imgObj,'width'));
        let imgObjH = parseInt(this.getStyle(this.imgObj,'height'));
        this.enlargeObj.style.backgroundPosition = `-${x*enlargeBjW/imgObjW}px -${y*enlargeBjH/imgObjH}px`
    }

    changImg(){
        let liObjArr = this.el.querySelectorAll('ul li');
        liObjArr.forEach((item,i)=>{
            item.onclick=()=>{
                this.imgObj.style.backgroundImage=`url(./imgs/${i+1}.jpg)`;
                this.enlargeObj.style.backgroundImage=`url(./imgs/${i+1}.big.jpg)`;
                this.el.querySelector('ul li.active').className='';
                liObjArr[i].className='active';
            }
        })
    }
}